<template>
  <view class="pages-container">
    <!-- navBar S -->
    <view class="swiperHead">
      <scroll-view
        :scroll-x="false"
        scroll-with-animation
        :scroll-into-view="'tab-' + scrollIntoView"
        :style="{ height: 88 + 'rpx', background: '#ffffff' }"
      >
        <view
          class="swiperTab"
          v-for="(item, index) in swiperTabList"
          :key="index"
          :id="'tab-' + index"
          @click="currentTab(index, item)"
        >
          <!--导航标题-->
          <text
            :style="{
              color: swiperTabIdx == index ? '#fe2c55' : '#333333',
              fontSize: '26rpx',
            }"
          >
            {{ item.name }}
          </text>

          <!--线条-->
          <view class="swiperLine" v-show="currentSwiperLineShow">
            <view
              class="swiperLineActive"
              :class="[swiperTabIdx == index && currentSwiperLineAnimatie ? 'currentLine' : '']"
              v-if="swiperTabIdx == index"
            >
            </view>
          </view>
          <!--线条-->
        </view>
      </scroll-view>
    </view>
    <!-- 内容轮播 S -->
    <view class="swiper-main">
      <swiper class="swiper-content" :current="swiperTabIdx" @change="swiperChange">
        <swiper-item v-for="(item, index) in swiperTabList" :key="index">
          <scroll-view
            :scroll-y="true"
            refresher-enabled
            enable-back-to-top
            :refresher-triggered="refresherTriggered"
            @scrolltolower="handleScrolltolower"
            @refresherrefresh="handleRefresherrefresh"
            class="scroll-view-box"
          >
            <PubOrderList :dataList="currentList" :swiperTabList="swiperTabList"></PubOrderList>
            <view name="more">
              <uni-load-more v-if="loadMoreShow && currentList.length" :status="showLoadMore" />
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import PubOrderList from '@/components/allCards/PubOrderList.vue'
import type { UniLoadMoreStatus } from '@uni-helper/uni-ui-types'
import type { SwiperOnChangeEvent } from '@uni-helper/uni-app-types'
import { orderList } from '@/api/modules/test'
import { ref } from 'vue'
onLoad(() => {
  console.log('onLoad')
  curNavbar.value = swiperTabList.value[swiperTabIdx.value]
  getDataList()
})

const swiperTabList = ref<Record<string, any>[]>([]) //导航栏
const currentList = ref<Record<string, any>[]>([]) //当前展示的列表
const currentSwiperLineShow = ref(true) //是否显示线条
const noDataShow = ref(true) // 没有数据时的展示信息, 默认没有数据时展示  “无数据提示”
const curNavbar = ref({}) // 当前选中的导航的值

const loadMoreShow = ref(true) // 是否显示加载更多
const showLoadMore = ref<UniLoadMoreStatus>('more') // 加载更多的显示状态 按需必传	noMore没有更多	loading加载中	more加载前
const currentSwiperLineAnimatie = ref(true) //当前选中的导航栏线条过渡效果
const refresherTriggered = ref(true) //设置当前下拉刷新状态
const surePullDown = ref(true) //可以进行下拉 防止多次触发下拉

swiperTabList.value = [
  { alias: 0, name: '全部' },
  { alias: 1, name: '待支付' },
  { alias: 2, name: '已支付' },
  { alias: 3, name: '已完成' },
  { alias: 4, name: '已取消' },
]
currentList.value = []

const swiperTabIdx = ref(0) //导航对应列表下标
const scrollIntoView = ref(0) //设置哪个方向可滚动，则在哪个方向滚动到该元素

// 下拉获取数据
const getDataList = async () => {
  uni.showLoading({
    title: '加载中...',
    mask: true,
  })

  setTimeout(async () => {
    const res: any = await orderList()

    if (res.data.length) {
      uni.hideLoading()

      currentList.value = res.data
      stopPullDownRefresh()
    }

    console.log('获取数据')
  }, 500)
}
// 点击导航栏事件
const currentTab = (index: any, item: any) => {
  console.log(index, item, 'tabbar')
  currentList.value = []
  swiperTabIdx.value = index
  scrollIntoView.value = Math.max(0, index - 1)
  getDataList
  // const res: any = await orderList()
}
//swiper滑动事件
const swiperChange = (e: SwiperOnChangeEvent) => {
  console.log(e, 'sssss')
  // 根据id来展示
  swiperTabIdx.value = e.detail.current
  scrollIntoView.value = Math.max(0, e.detail.current - 1)
}

// 滚动到底部
const handleScrolltolower = () => {
  console.log('触底加载')
  // this.showLoadMore = "loading"
  // if (this.pageNum < this.last_page) {
  // 	this.pageNum++
  // 	this.getDataList();
  // } else {
  showLoadMore.value = 'noMore'
  // }
}
// 下拉刷新
const handleRefresherrefresh = () => {
  // console.log('下拉刷新');
  // this.pageNum = 1
  // this.getDataList()
  refresherTriggered.value = true
  if (surePullDown.value) {
    // 执行下拉刷星
    // this.$emit('refresherrefresh')
    // this.pageNum = 1
    getDataList()
  }
  surePullDown.value = false
}

// 停止下拉刷新
const stopPullDownRefresh = () => {
  refresherTriggered.value = false
  surePullDown.value = true
}
</script>

<style scoped lang="scss">
@use './index';
</style>
